<script setup lang="ts">
import router from '@/router';
import {logout, helloTest,} from '@/netForAxios/net';
import {ref, markRaw, computed} from "vue";
import {Menu, Search, StarFilled, UserFilled, Plus, Cpu} from "@element-plus/icons-vue";
import StartPanel from './Start.vue'   // 你的“开始”组件
import FavPanel from './Fav.vue'   // 你的“收藏”组件
import AiPanel from './AI.vue'
/* 1. 本地变量决定当前高亮 & 组件 */
const activeTab = ref('start')              // 默认显示“开始”

const viewMap = {
  start: markRaw(StartPanel),
  fav: markRaw(FavPanel),
  ai: markRaw(AiPanel)
}

const currentView = computed(() => viewMap[activeTab.value])

/* 2. 菜单选择事件：只改变量，不 push */
function handleSelect(key) {
  activeTab.value = key
}

function Logout() {
  logout(() => {
    router.push('/');
  })
}

function test() {
  helloTest();
}
const input = ref('')

</script>

<template>
  <div class="container">
    <div class="Sidebar">

      <div class="header">
        <div class="top-row">
          <!-- 左侧 -->
          <div class="left-box">
            <el-image class="logo" src="./src/assets/image/logo2.png" fit="fill"/>
            <span class="title">K·K</span>
          </div>
          <!-- 右侧 -->
          <el-avatar class="user-logo" :icon="UserFilled" :size="40"/>
        </div>
        <div class="under-row">
          <el-input v-model="input" placeholder="搜索" :prefix-icon="Search" style="width: 80%;"></el-input>
          <el-button :icon="Plus" size="default" type="default"></el-button>
        </div>
      </div>

      <div class="content" style="height: 100%;margin-top: 20px;background-color: white">
        <el-menu @select="handleSelect"
                 :default-active="activeTab"
                 style="--el-menu-bg-color:rgba(222,222,222,0.31)">
          <el-menu-item index="start" style="padding: 0;">
            <el-icon style="margin-left: 10px">
              <Menu/>
            </el-icon>
            <span>开始</span>
          </el-menu-item>
          <el-menu-item index="fav" style="padding: 0;">
            <el-icon style="margin-left: 10px">
              <StarFilled/>
            </el-icon>
            <span>收藏</span>
          </el-menu-item>
          <el-menu-item index="ai" style="padding: 0;">
            <el-icon style="margin-left: 10px">
              <Cpu/>
            </el-icon>
            <span>AI</span>
          </el-menu-item>
        </el-menu>
        <el-button @click="Logout">退出登入</el-button>
        <el-button @click="test">测试</el-button>
      </div>

      <div class="under" >
        <el-progress  :percentage="50" style="width: 90%;" />
      </div>
    </div>
    <div class="main">
      <transition name="el-fade-in-linear" mode="out-in">
        <component :is="currentView"/>
      </transition>
    </div>

  </div>
</template>

<style scoped>

.under-row {
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.under{
  display: flex;          /* 1. 开启 flex */
  justify-content: center; /* 2. 水平居中 */
  align-items: center;    /* 3. 垂直居中 */
  height: 5%;
}

.header {
  height: 12%; /* 保持原来的 15% 高度 */
  min-height: 60px; /* 防止缩得太小 */
  /* 控制 底下子容器的布局方式 */
  padding: 0; /* 统一交给子元素自己控制 margin */
  display: flex;
  flex-direction: column; /* 关键：上下两行 */
  align-items: flex-start; /* 让子元素贴顶部 */
  justify-content: space-between;
}

/* 第一行，左右两端对齐 */
.top-row {
  width: 100%;
  display: flex;
  align-items: flex-start; /* 贴顶 */
  justify-content: space-between;
  padding: 10px 0 0; /* 只给上、左、右 10 px */
}

.left-box {
  display: flex;
  align-items: center;
  margin: 0 10px 0;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 25%;
  overflow: hidden;
}

.title {
  margin-left: 8px;
  font-size: 18px;
  font-weight: 600;
}

.user-logo {
  margin: 0 10px 0; /* 右上角 10px 间距 */
}


.container {
  height: 100%;
  display: flex;
}

.Sidebar {
  width: 18%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  background-color: rgba(222, 222, 222, 0.31);
  border: 1px solid rgba(182, 182, 182, 0.17);
}

.main {
  width: 100%;
  overflow: hidden;
}

</style>